Customization

Customization Object

Each widget defines its own structure and allows this structure to be configured with a customization object. This enables fine-grained control over the visibility and behavior of UI components in the Dashboard widget. It allows teams to tailor the interface based on user roles, product branding, or embedding context.

This recursive module allows you to add keep and remove at the top level or within a view.

// The customization object
{
  remove: [ ... ],      // Optional. Global elements to remove.
  keep: [ ... ],        // Optional. Global elements to retain.
  views: {              // Supports the following:
    list: { ... },      // The Asset List
    design: { ... },    // The Dashboard Editor
    preview: { ... },   // Preview mode of a Dashboard
    endUser: { ... }    // Live, interactive end-user dashboard
  }
}

Within each view, you can include the following:

Key	Type	Description
remove	string[]	List of UI controls to hide.
keep	string[]	List of UI controls to retain (others at the same level will be removed).
defaults	object	Default settings for specific functionality.
subModules	object	Customizations for dependent components (such as chart panels or modals).
subModules.conditional	array	List of rule-based customizations based on attributes (only for subModules).

The global verbs, keep and remove, are evaluated in order of precedence:

1. remove: Removes matching keys.
2. keep: Keeps matching keys while removing all others at the same level.

To simplify configuration, you can use wildcards:

Pattern	Behavior
*string	Matches anything ending with string.
string*	Matches anything starting with string.
*string*	Matches anything containing string.

Notes

• For the keep definition, if a key matches the pattern, it will be the only item on its level to remain in the structure.
• The remove placeholder signals that a control is not available in embed mode or should never be shown to users.
• You can configure customization dynamically at runtime based on user roles or application state.
• The grammar is extendable and supports overrides for dependent widgets using subModules.

Full Example

const customization = {
  // Global elements to remove
  remove: ['navBar.appTitle'], // Remove the application title from the navigation bar

  views: {
    // List View Customization
    list: {
      remove: [
        'controlBarLeft.qCreateDash',                              // Remove "Create" button
        'controlBarRight.qSwitchView',                             // Remove "Switch View" option
        'assetList.asset.optionMenu.qEditDash'                     // Remove "Edit" action
        'assetList.asset.optionMenu.qUseDash'                      // Remove "Use" action
        'assetList.asset.optionMenu.qDeleteDash',                  // Remove "Delete" action
        'assetList.asset.optionMenu.qDuplDash',                    // Remove "Duplicate" action
      ],
      defaults: {
        assetListViewMode: 'table'                                 // Set "Table" as default view
      }
    },

    // Design View Customization
    design: {
      remove: [
        'menuBar.file.qMnuCreateDash',                            // Remove "New" option
        'menuBar.file.qMnuDuplicateDash',                         // Remove "Duplicate" option
        'menuBar.file.qMnuDeleteDash',                            // Remove "Delete" option
        '*Themes'                                                 // Remove all theme-related options
      ],
      keep: [
        '*DownloadDash.qDashPDF'                                  // Keep only "Download PDF" in download menu
      ],
      subModules: {
        chartPanel: {
          keep: ['header.optionMenu.qDownloadChart.qChartPDF'],   // Keep "Download PDF" in chart panel
          remove: ['header.qChartSelection']                      // Remove "Chart Selection" option
        }
      }
    },

    // Preview View Customization
    preview: {
      remove: ['filterPanel'],                                    // Remove filter panel
      subModules: {
        chartPanel: {
          keep: ['header.qChartName']                              // Keep only chart name
        }
      }
    },

    // End-User View Customization
    endUser: {
      subModules: {
        chartPanel: {
          conditional: [
            {
              condition: {
                field: 'category',
                operator: '=',
                value: 'metric'
              },
              keep: ['header.optionMenu.qDownloadChart.qChartPDF'] // Keep "Download PDF" only for metrics
            }
          ]
        }
      }
    }
  }
};

views Parameters

For a complete list of all available view properties and their descriptions, see Dashboards Customization Views.

Defaults

Enables you to set styles and other customizations for the dependent components.

defaults: {
  customStyles:{
    button: { 'color': '#200606' } 
  }
}  

For a complete list of all available properties and their descriptions, see Dashboards Customization Defaults.

submodules Chart Panel

const subModules = {
    chartPanel: {
        keep: ['menu.download.pdf']
    }
 }

For a complete list of all available properties and their descriptions, see Dashboards Customization Submodules.

conditional blocks

You can use the conditional block to show/hide elements based on widget metadata or attributes (for example, a chart's category). At present, the only valid value for the field attribute is "category", which can have a value of: "metric", "chart", or "summary".

"conditional": [ // Please check your conditions to avoid any logical conflicts.
    {
      "condition": {
        "field": "category",
        "operator": "=",
        "value": "metric"
      },
      "keep": ["*.download.excel"]
    },
    {
      "condition": {
        "field": "category",
        "operator": "=",
        "value": "chart"
      },
      "keep": ["*.download.pdf"]
    }
]